<template>
  <el-row :gutter="15" class="head">
    <el-card shadow="always">
      <el-form ref="elForm" :model="queryParams" :rules="rules" label-width="100px">
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="仓库" prop="company">
                <el-select v-model="queryParams.wId" placeholder="请选择仓库" clearable>
                  <el-option
                    v-for="(item, i) in depotList"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model.number="queryParams.phone" placeholder="请输入手机号码">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-form-item label="财物状态" prop="registryStatus">
                <el-select
                  v-model="queryParams.registryStatus"
                  :disabled="Boolean(registryStatus)"
                  placeholder="请选择财物状态"
                  clearable
                >
                  <el-option
                    v-for="(item, i) in dict.type.financial_registry_status"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="办案人员名称" prop="phName" clearable>
                <el-input
                  v-model="queryParams.phName"
                  placeholder="请输入办案人员名称"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-form-item label="财物类型" prop="type">
                <el-select v-model="queryParams.type" placeholder="请输入财物类型" clearable>
                  <el-option
                    v-for="(item, i) in dict.type.financial_property_type"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-form-item label="财物名称" prop="pName">
                <el-input
                  v-model="queryParams.pName"
                  placeholder="请输入财物名称"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="登记时间" prop="time">
                <el-date-picker
                  style="width: 45%; margin-right: 10%"
                  clearable
                  v-model="queryParams.registryTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="开始时间"
                >
                </el-date-picker>
                <el-date-picker
                  style="width: 45%"
                  clearable
                  v-model="queryParams.endTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="结束时间"
                >
                </el-date-picker>
              </el-form-item> </el-col
            ><el-col :span="6" :offset="10">
              <el-form-item size="large" style="display: flex; justify-content: flex-end">
                <el-button class="bg-color-2d" @click="handleQuery">搜索</el-button>
                <el-button class="da" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-form>
    </el-card>
    <el-row>
      <el-col
        :span="24"
        v-if="register"
        style="margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: flex-end"
      >
        <el-button class="regist" type="primary" @click="registerDispose">{{
          buttonName
        }}</el-button>
      </el-col>
    </el-row>
  </el-row>
</template>
<script>
import request from '@/utils/request.js'
export default {
  naem: 'FormData',
  components: {},
  dicts: ['financial_property_type', 'financial_registry_status'],
  props: {
    // 是否显示'处理列表'按钮
    register: {
      type: Boolean,
      default: true
    },
    // '处理列表'按钮名称
    buttonName: {
      type: String,
      default: '登记处置'
    },
    // 页数
    pageNum: {
      type: Number,
      default: 1
    },
    // 页大小
    pageSize: {
      type: Number,
      default: 10
    },
    // 给财物状态传值就代表禁用财务状态
    registryStatus: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rules: {
        phone: [
          {
            pattern: /^1\d{10}$/,
            message: '手机号格式错误'
          }
        ]
      },
      // 仓库列表
      depotList: [],
      // 查询参数
      queryParams: {
        wId: null,
        phone: null,
        registryStatus: null,
        phName: null,
        type: null,
        pName: null,
        registryTime: null,
        endTime: null
      }
    }
  },
  computed: {},
  watch: {
    registryStatus: {
      immediate: true,
      handler: function (newV, oldV) {
        this.queryParams.registryStatus = newV
      }
    }
    // queryParams: {
    //   deep: true,
    //   handler: function (newV, oldV) {
    //     console.log('watch中:', newV.wId)
    //   }
    // }
  },
  created() {},
  mounted() {
    // 获取仓库列表数据并处理
    request({
      url: '/system/warehouse/list',
      method: 'get'
    }).then((e) => {
      e.rows.forEach((i) => {
        this.depotList.push({ label: i.name, value: i.id })
      })
    })
    // 组件初始化触发搜索
    this.handleQuery()
  },
  methods: {
    // 点击最右侧按钮
    registerDispose() {
      this.$emit('registerDispose')
    },
    // 重置
    resetQuery() {
      for (const key in this.queryParams) {
        this.queryParams[key] = null
      }
      this.handleQuery()
    },
    // 搜索
    handleQuery() {
      this.$emit('handleQuery', {
        ...this.queryParams,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    }
  }
}
</script>
<style scoped>
.el-select {
  width: 100%;
}
.app-container {
  padding: 15px;
}
</style>
